<template>
  <div>
    <!-- 展示区 -->
    <div>
      <h1>{{userInfo.name}}</h1>
      <h1>{{userInfo.age}}</h1>
    </div>
    <!-- 表单 -->
    <!-- actions写的是后台地址 -->
    <form>
      <input v-model="name" type="text" placeholder="用户名" />
      <br />
      <input v-model="age" @keyup.13="reset" type="number" placeholder="年龄" />
    </form>
    <button @click="reset">修改</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["userInfo"])
  },
  data() {
    return {
      name: "",
      age: ""
    };
  },
  methods: {
    ...mapMutations(["setUser"]),
    reset() {
      // 调用mutation里的函数,把一个新对象传过去
      // this.$store.commit("setUser", { name: this.name, age: this.age });
      const data = { name: this.name, age: this.age };
      this.setUser(data);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>